
<template>
  <div id="coupon" :class='{"isiphone":$isiphone}'>
    <div class="top">
      <tab :line-width="1" custom-bar-width="29px" v-model="index" active-color='#EC1B24'>
        <tab-item class="vux-center" :selected="defaultTab === item" v-for="(item, index2) in tabList" @click="defaultTab = item" :key="index2">{{item}}</tab-item>
      </tab>
       <div class="vux-swiper-wrap">
        <div class="vux-swiper">
          <div class="tab-swiper vux-center">
            <div class="one" v-for="(item, index2) in usefulC" :key='index2+"x"' @click='JumpItem(item)' v-if="index == 0">
              <div class="item">
                <img src="../../../wechat/static/images/kq_bg.png" alt="">
                <div class="left">
                  <p>
                    <span class=''>￥</span>
                    <span class='money'>{{item.surplus}}</span>
                    <span class='balance'>（剩余可用）</span>
                  </p>
                  <p v-if="item.haveRange" class='range'>使用范围：{{item.useRangeDetail}}</p>
                  <p>有效期至{{item.date}}</p>
                </div>
                <div class="right">
                  <span>乐福卡</span>
                  <span>总金额:￥{{item.money}}</span>
                </div>
              </div>
            </div>
            <div class="one surplus" v-for="(item, index2) in invalidC" :key='index2' @click='JumpItem(item)' v-if="index == 1">
              <div class="item">
                <img src="../../../wechat/static/images/kq_bg_02.png" alt="">
                <div class="left">
                  <p>
                    <span class=''>￥</span>
                    <span class='money'>{{item.surplus}}</span>
                    <span class='balance'>（剩余可用）</span>
                  </p>
                  <p v-if="item.haveRange" class='range'>使用范围：{{item.useRangeDetail}}</p>
                  <p>有效期至{{item.date}}</p>
                </div>
                <div class="right">
                  <span>乐福卡</span>
                  <span>总金额:￥{{item.money}}</span>
                </div>
              </div>
            </div>
            <load-more :show-loading="false" tip="暂无更多可用卡券" v-show="isloading&&usefulC.length==0&&index == 0" background-color="#fbf9fe"></load-more>
            <load-more :show-loading="false" tip="暂无更多失效卡券" v-show="isloading&&invalidC.length==0&&index == 1" background-color="#fbf9fe"></load-more>

          </div>
        </div>
      </div>
      <a href="javascript:;" @click='JumpAdd'>添加乐福卡券</a>
    </div>
     <div  @click="scrollTopBtn" class="top-icon">
      <img src="../../../wechat/static/images/top.png" alt="">
    </div>
  </div>
</template>

<script>
import { Tab, TabItem, Swiper, SwiperItem, LoadMore } from "vux";
export default {
  name: "coupon",
  data() {
    return {
      index: 0,
      defaultTab: "可用券",
      tabList: ["可用券", "失效券"],
      usefulC: [
        {
          money: 5000.0,
          surplus: 1000.0,
          date: "2019-05-12",
          id: 1,
          haveRange: true
        },
      ],
      invalidC: [
        {
          money: 5000.0,
          surplus: 1000.0,
          date: "2019-05-12",
          id: 1
        }
      ],
      isloading: false
    };
  },
  mounted() {
    this.getList();
  },
  created() {},
  methods: {
    getList() {
      let url =
        this.$CONSTANT.COUPON.findEsCouponByPage +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param1 = {
        pageIndex: 1,
        pageSize: 1000,
        status: 'o',
        userId: localStorage.getItem('userId')||''
      };
      this.usefulC = [];
      this.invalidC = [];
      // this.$vux.loading.show({
      //   text: "Loading"
      // });
      this.isloading = false;
      this.$common.post(url, param1, res => {
        this.isloading = true;
        setTimeout(() => {
          this.$vux.loading.hide()
        }, 500);
        if (res.status == 200) {
          var bussData = res.data.bussData;
          bussData.forEach(element => {
            var validTime = Date.parse(new Date(element.validTime.replace(/-/g, '/')))
            console.log('validTime')
            console.log(element.validTime)
            console.log(validTime)
            console.log(Date.parse(new Date()))
            if(validTime>Date.parse(new Date())){
              this.usefulC.push({
                money: element.price,
                surplus:  element.restPrice,
                date: element.validTime,
                id: element.id,
                haveRange: element.useRangeDetail? true:false,
                useRangeDetail: element.useRangeDetail
              })
            }
          });
        } else {
          this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: 'auto'
            });
        }
      });
      let param2 = {
        pageIndex: 1,
        pageSize: 1000,
        status: 'q',
        userId: localStorage.getItem('userId')||''
      };
      this.$common.post(url, param2, res => {
        this.isloading = true;
        this.$vux.loading.hide();
        if (res.status == 200) {
          var bussData = res.data.bussData;
          bussData.forEach(element => {
            this.invalidC.push({
              money: element.price,
              surplus:  element.restPrice,
              date: element.validTime,
              id: element.id,
              haveRange: element.useRangeDetail? true:false,
              useRangeDetail: element.useRangeDetail
            })
          });
        } else {
          this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: 'auto'
            });
        }
      });
    },
     scrollTopBtn(){
      document.body.scrollTop=document.documentElement.scrollTop=0
    },
    onItemClick(index) {
      console.log("on item click:", index);
    },
    JumpItem(item) {
      this.$router.push({ path: "/couponD", query: { id: item.id } });
    },
    JumpAdd() {
      this.$router.push({ path: "/couponAdd" });
    }
  },
  components: {
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    LoadMore
  }
};
</script>

<style lang="less">
#coupon {
  padding-bottom: 30px!important;
  height: 100%;
  .top {
    height: 100%;
    .vux-tab-wrap {
      .vux-tab-container {
        .vux-tab {
          .vux-tab-item {
            font-family: PingFang-SC-Medium;
            color: #999;
            font-size: 15px;
            background: none;
          }
          .vux-tab-selected {
            color: #333 !important;
          }
          .vux-tab-ink-bar {
            height: 2px !important;
          }
        }
      }
    }
    .vux-swiper-wrap {
      height: 100%;
      .vux-swiper {
        // height: 100% !important;
        // overflow-y: scroll;
        .tab-swiper {
          padding-top: 25px;
          .one {
            position: relative;
            padding: 0px 21px 13px;
            > img {
              width: 15px;
              height: 15px;
              position: absolute;
              top: 63px;
              right: 26px;
            }
            .item {
              display: inline-block;
              width: 100%;
              height: 110px;
              font-size: 0px;
              position: relative;
              > img {
                width: 100%;
                height: 110px;
                position: absolute;
                top: 0px;
                right: 0px;
              }
              .left {
                width: 66%;
                display: inline-block;
                text-align: center;
                position: relative;
                float: left;
                p {
                  padding-top: 14px;
                  overflow: hidden;
                  white-space: nowrap;/*不换行*/
                  text-overflow:ellipsis;/*超出部分文字以...显示*/
                  span {
                    font-family: PingFang-SC-Medium;
                    font-size: 17px;
                    color: #fff;
                  }
                  .money {
                    font-family: MicrosoftYaHei;
                    font-size: 25px;
                  }
                  .balance {
                    font-family: PingFang-SC-Regular;
                    font-size: 11px;
                  }
                  &:last-child {
                    font-family: PingFang-SC-Regular;
                    font-size: 12px;
                    padding-top: 4px;
                    color: #ffe19f;
                  }
                }
                .range {
                  font-family: PingFang-SC-Medium;
                  font-size: 12px;
                  color: #d60100;
                  height: 25px;
                  line-height: 25px;
                  padding-top: 0;
                  background: #ffe19f;
                  margin: 0 19px;
                }
              }
              .right {
                width: 34%;
                display: inline-block;
                text-align: center;
                position: relative;
                top: 34%;
                span {
                  display: block;
                  font-family: PingFang-SC-Regular;
                  font-size: 15px;
                  color: #ffffff;
                  position: relative;
                  top: -10px;
                  &:last-child {
                    top: 0;
                    font-size: 10px;
                  }
                }
              }
            }
          }
          .surplus {
            .item {
              .left {
                p {
                  span {
                    color: #b5b5b5;
                  }
                  &:last-child {
                    color: #b5b5b5;
                  }
                }
                .range {
                  color: #ffffff;
                  background: #dbdbdb;
                }
              }
              .right {
                span {
                  color: #b5b5b5;
                }
              }
            }
          }
        }
      }
    }
    > a {
      position: fixed;
      bottom: 40px;
      left: 19.5%;
      text-align: center;
      display: inline-block;
      width: 61%;
      height: 45px;
      line-height: 45px;
      border: 1px solid transparent;
      border-radius: 23px;
      background-color: #f02931;
      font-family: PingFang-SC-Bold;font-weight: 600;
      font-size: 15px;
      color: #fff;
      text-align: center;
      &:hover {
        background-color: #e1252c;
      }
    }
  }
}
</style>
